<template>
	<div class="app-container">
		<div class="table-wrapper">
			<h4>地下管网易损性计算-接口式管道分析方法</h4>
			<el-form :inline="true" ref="queryRef" :rules="rules" label-position="right" :model="params"
				label-width="200px">
				<el-row justify="center">
					<el-col :span="11">
						<el-form-item label="编号：" class="form-item" prop="code">
							<el-input v-model="params.code" placeholder="" :disabled="true" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="年代：" class="form-item" prop="year">
							<el-input v-model="params.year" placeholder="请输入" :disabled="disabled" clearable />
							<!-- <el-select v-model="params.year" placeholder="请选择" class="form-select" :disabled="disabled" clearable>
								<el-option v-for="item in optionList1" :key="item.dictItemCode" :label="item.dictItemName" :value="item.dictItemCode">
								</el-option>
							</el-select> -->
						</el-form-item>
					</el-col>
					<!-- <el-col :span="11">
						<el-form-item label="维护人：" class="form-item" prop="createUserName">
							<el-input v-model="params.createUserName" placeholder="" clearable />
						</el-form-item>
					</el-col> -->
				</el-row>
				<!-- <el-row justify="center">
					<el-col :span="11">
						<el-form-item label="维护人所属单位：" class="form-item" prop="orgName">
							<el-input v-model="params.orgName" placeholder="" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="维护时间:" class="form-item" prop="createTime">
							<el-date-picker v-model="params.createTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row> -->
				<el-row justify="center">
					<el-col :span="11">
						<el-form-item label="设防情况：" class="form-item" prop="intensity">
							<el-select v-model="params.intensity" placeholder="请选择" class="form-select" :disabled="disabled"
								clearable>
								<el-option v-for="item in optionList2" :key="item.dictItemCode" :label="item.dictItemName"
									:value="item.dictItemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11"></el-col>
				</el-row>
				<el-row v-if="isAdd" justify="end">
					<el-form-item class="bottom-button">
						<!-- <el-button type="primary" @click="handleCalcAdd">新增</el-button> -->
						<!-- <el-button type="primary" @click="handleBrickModify">修改</el-button> -->
						<!-- <el-button type="primary" @click.prevent="handleCalcdelete">删除</el-button> -->
						<!-- <el-button type="primary" @click="showUploadDialog = true">参数导入</el-button> -->
						<el-button type="primary" @click="handleVerify" v-if="!route.query.id">验证</el-button>
						<el-button type="primary" @click="handleBrickApply" v-if="route.query.id">计算</el-button>
						<el-button type="primary" @click="onSubmit" v-if="route.query.id">提交</el-button>
					</el-form-item>
				</el-row>
			</el-form>
			<!-- 数据导入弹框 -->
			<import-data v-if="showUploadDialog" v-model="showUploadDialog" ref="uploadDialog" :uploadUrl="uploadUrl"
				downloadFileName="地下管网-埋地接口式管道分析方法计算参数导入.xlsx" @importSuccess="onImport"></import-data>

			<el-form :inline="true" ref="tableRef" :rules="rules" label-position="right" :model="tableFormData">
				<h4>①地震造成的管轴向变形</h4>
				<el-table class="listTables" ref="multipleTableRef" border :data="tableFormData.tableData"
					style="width: 100%" @selection-change="handleSelectionChange"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column type="index" width="55" label="序号">
					</el-table-column>
					<el-table-column header-align="center" align="center" width="120">
						<template #header>
							<span class="color-red">E</span>管材弹性模量（N/㎡）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.elasticityModulus`"
								:rules="rules.elasticityModulus">
								<el-input v-model="scope.row.elasticityModulus" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" width="120">
						<template #header>
							<span class="color-red">F</span>管道横截面积（㎡）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.crossSectionalArea`"
								:rules="rules.crossSectionalArea">
								<el-input v-model="scope.row.crossSectionalArea" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" width="100">
						<template #header>
							<span class="color-red">L</span> 地震波长（rn）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.earthquakeWavelength`"
								:rules="rules.earthquakeWavelength">
								<el-input v-model="scope.row.earthquakeWavelength" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" width="100">
						<template #header>
							<span class="color-red">Ф</span>地震波入射角( 。 )
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.earthquakewaveIncidentAngle`"
								:rules="rules.earthquakewaveIncidentAngle">
								<el-input v-model="scope.row.earthquakewaveIncidentAngle" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">V</span>地面运动速度
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.groundMotionSpeed`"
								:rules="rules.groundMotionSpeed">
								<el-input v-model="scope.row.groundMotionSpeed" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" width="100">
						<template #header>
							<span class="color-red">K</span>基系数（N/m^2）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.foundationZCoefficient`"
								:rules="rules.foundationZCoefficient">
								<el-input v-model="scope.row.foundationZCoefficient" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">CR</span> 面波传播速度
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.surfaceWaveVelocity`"
								:rules="rules.surfaceWaveVelocity">
								<el-input v-model="scope.row.surfaceWaveVelocity" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="jkLCos" header-align="center" align="center" width="150">
						<template #header>
							<!-- 公式 -->
							<Formula fontWeight="bold" :option="[
								{ content: 'L', super: '\'' },
								{ content: '=', margin: '0 8px' },
								{ content: 'L/cosΦ' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="result" header-align="center" align="center" width="180">
						<template #header>
							<!-- 公式 -->
							<MultilineFormula display="block" :option="[
								{ content: 'ζ' },
								{ content: '=', margin: '0 8px' },
								{
									rows: [
										[{ content: '1' }],
										[
											{ content: '1+' },
											{
												rows: [
													[{ content: 'EF' }],
													[{ content: 'K' }]
												]
											},
											{ content: '(', fontSize: '32px' },
											{
												rows: [
													[{ content: '2π' }],
													[{ content: 'L', super: '\'' }]
												]
											},
											{ content: ')', fontSize: '32px', super: '2' },
										]
									]
								}
							]"></MultilineFormula>
						</template>
					</el-table-column>
					<el-table-column prop="er" header-align="center" align="center" width="120">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" :option="[
								{ content: 'ε', sub: 'R' },
								{ content: '=', margin: '0 8px' },
								{ content: 'V/C', sub: 'R' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="et" header-align="center" align="center" width="160">
						<template #header>
							<div>管道轴向应变量幅值</div>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: 'ε', sub: 'T' },
								{ content: '=', margin: '0 8px' },
								{ content: 'ε', sub: 'R' },
								{ content: '·' },
								{ content: 'ζ' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="interfaceReductionCoefficient" header-align="center" align="center" width="100">
						<template #header>
							<span class="color-red">Cl</span>接口形式折减系数
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.interfaceReductionCoefficient`"
								:rules="rules.interfaceReductionCoefficient">
								<el-input v-model="scope.row.interfaceReductionCoefficient" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="singlePipeLength" header-align="center" align="center" width="100">
						<template #header>
							<span class="color-red">l</span>为单根管段长(m)
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.singlePipeLength`"
								:rules="rules.singlePipeLength">
								<el-input v-model="scope.row.singlePipeLength" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="lt" header-align="center" align="center" width="180">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 'T' },
								{ content: '=', margin: '0 8px' },
								{ content: 'C', sub: 'l' },
								{ content: '·' },
								{ content: 'l' },
								{ content: '·' },
								{ content: 'ε', sub: 't' },
							]"></Formula>
						</template>
					</el-table-column>
				</el-table>

				<h4>②土静压力造成的轴向变形</h4>
				<el-table class="listTables" ref="multipleTableRef" border :data="tableFormData.tableData"
					style="width: 100%" @selection-change="handleSelectionChange"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column type="index" width="55" label="序号" />
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">H</span>管道的深度（m）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.depth`" :rules="rules.depth">
								<el-input v-model="scope.row.depth" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">D</span>管外径（m）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.pipeOd`" :rules="rules.pipeOd">
								<el-input v-model="scope.row.pipeOd" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label="δ管壁厚度（m）">
						<template #header>
							<span class="color-red">δ</span>管壁厚度（m）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.thickness`" :rules="rules.thickness">
								<el-input v-model="scope.row.thickness" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label="E管材弹性模量（N/㎡）" width="120">
						<template #header>
							<span class="color-red">E</span>管材弹性模量（N/㎡）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.elasticityModulus`"
								:rules="rules.elasticityModulus">
								<el-input v-model="scope.row.elasticityModulus" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">r</span>土的重度
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.soilbulkDensity2`"
								:rules="rules.soilbulkDensity2">
								<el-input v-model="scope.row.soilbulkDensity2" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: 'K', sub: '0' },
							]"></Formula>
							管侧横向土压力系数
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.soilPressure`" :rules="rules.soilPressure">
								<el-input v-model="scope.row.soilPressure" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="jkPs" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<MultilineFormula tagOffset="-6px" :option="[
								{ content: 'P', sub: 's' },
								{ content: '=', margin: '0 8px' },
								{
									rows: [
										[
											{ content: '1+' },
											{ content: 'K', sub: '0' },
										],
										[{ content: '2' }]
									]
								},
								{ content: 'r' },
								{ content: '·' },
								{ content: 'H' },

							]"></MultilineFormula>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label="ŋ曲率有关的修正系数">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.curvature`" :rules="rules.curvature">
								<el-input v-model="scope.row.curvature" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="es" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<MultilineFormula tagOffset="-6px" :option="[
								{ content: 'ε', sub: 's' },
								{ content: '=', margin: '0 8px' },
								{
									rows: [
										[
											{ content: 'P', scale: 2, sub: 's' },
											{ content: 'D', sub: 'ŋ' },
										],
										[{ content: '2δ' }]
									]
								},
								{ content: '·' },
								{
									rows: [
										[{ content: '1' }],
										[{ content: 'E' }]
									]
								}
							]"></MultilineFormula>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label="l 为单根管段长(m)">
						<template #header>
							<span class="color-red">l</span>为单根管段长(m)
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.singlePipeLength`"
								:rules="rules.singlePipeLength">
								<el-input v-model="scope.row.singlePipeLength" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="compressDeform" header-align="center" align="center">
						<template #header>
							<div>压缩变形</div>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 's' },
								{ content: '=', margin: '0 8px' },
								{ content: 'ε', sub: 's' },
								{ content: '·' },
								{ content: 'l' },
							]"></Formula>
						</template>
					</el-table-column>
				</el-table>

				<h4>③水内压造成轴向变形</h4>
				<el-table class="listTables" ref="multipleTableRef" border :data="tableFormData.tableData"
					style="width: 100%" @selection-change="handleSelectionChange"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column type="index" width="55" label="序号" />
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">Pn</span>水内压（N/㎡）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.internalWaterPressure`"
								:rules="rules.internalWaterPressure">
								<el-input v-model="scope.row.internalWaterPressure" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">μ</span>管材泊桑比
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.poissonsRatio`" :rules="rules.poissonsRatio">
								<el-input v-model="scope.row.poissonsRatio" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">E</span>管材弹性模量（N/㎡）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.elasticityModulus`"
								:rules="rules.elasticityModulus">
								<el-input v-model="scope.row.elasticityModulus" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label=" δ  管壁厚度（m）">
						<template #header>
							<span class="color-red">δ</span>管壁厚度（m）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.thickness`" :rules="rules.thickness">
								<el-input v-model="scope.row.thickness" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<Formula :option="[
								{ content: 'ŋ' },
							]"></Formula>曲率有关的修正系数
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.curvature`" :rules="rules.curvature">
								<el-input v-model="scope.row.curvature" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<span class="color-red">D</span>管外径（m）
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.pipeOd`" :rules="rules.pipeOd">
								<el-input v-model="scope.row.pipeOd" :disabled="scope.row.disabled" size="small"
									type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="tensileStrain" header-align="center" align="center" width="220">
						<template #header>
							<div>拉伸应变</div>
							<!-- 公式 -->
							<MultilineFormula tagOffset="-6px" :option="[
								{ content: 'ε', sub: 'h' },
								{ content: '=', margin: '0 8px' },
								{
									rows: [
										[
											{ content: 'P', sub: 'n' },
											{ content: '·' },
											{ content: 'D', sub: 'ŋ' },
										],
										[{ content: '2δ' }]
									]
								},
								{ content: '·' },
								{
									rows: [
										[{ content: '1' }],
										[{ content: 'E' }]
									]
								},
								{ content: '·' },
								{ content: 'μ' },

							]"></MultilineFormula>
						</template>
					</el-table-column>
					<el-table-column prop="strainDeform" header-align="center" align="center">
						<template #header>
							<div>拉伸变形</div>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 'h' },
								{ content: '=', margin: '0 8px' },
								{ content: 'ε', sub: 'h' },
								{ content: '·' },
								{ content: 'l' },
							]"></Formula>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="combineAxialStrain" header-align="center" align="center" width="200">
							<template #header>
									<div>组合轴向拉伸</div>
									<Formula tagOffset="-6px" fontWeight="bold" :option="[
											{ content: '△L' },
											{ content: '=', margin: '0 8px' },
											{ content: '△L', sub: 'T' },
											{ content: '+' },
											{ content: '△L', sub: 's' },
											{ content: '+' },
											{ content: '△L', sub: 'h' },
									]"></Formula>
							</template>
					</el-table-column> -->
				</el-table>

				<h4>计算破坏程度</h4>
				<el-table class="listTables" ref="multipleTableRef" border :data="tableFormData.tableData"
					style="width: 100%" @selection-change="handleSelectionChange"
					:cell-style="{ border: '1px solid #e5ebf7' }"
					:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
					<el-table-column type="index" width="55" label="序号" />
					<el-table-column prop="lt" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 'T' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="compressDeform" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 'S' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="strainDeform" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L', sub: 'h' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column prop="combineAxialStrain" header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '△L' },
								{ content: '=', margin: '0 8px' },
								{ content: '△L', sub: 'T' },
								{ content: '+' },
								{ content: '△L', sub: 's' },
								{ content: '+' },
								{ content: '△L', sub: 'h' },
							]"></Formula>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center" label="修正值">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.combineAxialStrainCorrect`"
								:rules="rules.combineAxialStrainCorrect">
								<el-input v-model="scope.row.combineAxialStrainCorrect" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column header-align="center" align="center">
						<template #header>
							<!-- 公式 -->
							<Formula tagOffset="-6px" fontWeight="bold" :option="[
								{ content: '[△L]' },
							]"></Formula>
						</template>
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.allowableElongation`"
								:rules="rules.allowableElongation">
								<el-input v-model="scope.row.allowableElongation" :disabled="scope.row.disabled"
									size="small" type="number"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="jkDamage" header-align="center" align="center" label="破坏程度" />
					<el-table-column header-align="center" align="center" label="修正值">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.jkDamageCorrect`"
								:rules="rules.jkDamageCorrect">
								<el-input v-model="scope.row.jkDamageCorrect" :disabled="scope.row.disabled"
									size="small"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<!-- 版本查看 -->
			<GetVersion v-if="openDialog" v-model:open="openDialog" @recalculateVersion="recalculateVersion" />
			<el-dialog v-model="dialogVisible" @close="cancle" title="提示" width="500px">
				<p v-for="item in messageList">{{ item.label }}
					<el-popover placement="bottom" title="提示详情" :width="200" trigger="click">
						<template #reference>
							<span style="color: #107ce5;cursor: pointer;">提示详情</span>
						</template>
						<template #default>
							<p v-for="val in item.value">{{ val }}</p>
						</template>
					</el-popover>
				</p>
				<p>&nbsp;</p>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
// 接口
import { getInfo } from '@/api/login';
import {
	getByIdAndType, //查询
	countInterfaceWelding, //计算
	saveInterfaceWelding, //保存
	importInterfaceWeldingUrl, // 参数导入
	recalculate, // 获取版本
	somputationSave2,//计算保存
} from "@/api/lifelineVulnerAnalysis/lifelineVulnerAnalysis.js";
import { getValidDictItemsByDictCode } from "@/api/map/disasterDataManagement/lifelineSystemInfo.js";
// 公用方法
import { parseTime } from "@/utils/ruoyi.js";
// 引入公式组件
import Formula from '@/components/Formula';
import MultilineFormula from '@/components/Formula/multiline';
// 引入导入弹框
import ImportData from "@/components/ImportData";
import GetVersion from './Version';

// 引入store
import useUserStore from '@/store/modules/user';
import useDictStore from '@/store/modules/dict';
// 获取pinia
const userStore = useUserStore();
const dictStore = useDictStore();
// 用户名
const userName = computed(() => userStore.name || '');
// 所属机构名称
const orgName = computed(() => userStore.orgName || '');

// 当前实例
const { proxy } = getCurrentInstance();
// 当前路由
const route = useRoute();
const router = useRouter();

// 打开类型，query为查看
let operateType = computed(() => route.query.operateType || false);
// 是否是新增页，有路由参数是详情页，否则是新增页
let isAdd = computed(() => (route.query.id && route.query.operateType ? false : true));
// 禁用
const disabled = ref(false);

//最多保留N小数 ,N 在 options {decimals: N} 中定义
const positivedecimals = (rule, value, callback) => {
	value = String(value);
	if (
		value.indexOf(".") != -1 &&
		(value.split(".").length > rule.options.decimals ||
			value.split(".")[0] === "" ||
			value.split(".")[1] === "")
	) {
		callback(new Error()); //防止输入多个小数点
	} else if (
		value.indexOf(".") != -1 &&
		value.split(".")[1].length > rule.options.decimals
	) {
		callback(new Error()); //小数点后两位
	} else {
		callback();
	}
};
//验证是否yyyy年份（非必填）
const isYearNotMust = (rule, value, callback) => {
	if (value == '' || value == undefined || value == null) {
		callback();
	} else if (isNaN(Number(value))) {
		callback(new Error('请输入yyyy格式如2022'));
	} else if (value.toString().length != 4) {
		callback(new Error('请输入yyyy格式如2022'));
	} else if (value.toString().indexOf(".") != -1) {
		callback(new Error('请输入yyyy格式如2022'));
	} else {
		callback();
	}
}
const data = reactive({
	// 表单参数
	params: {
		mainCode: "",//编号
		year: "",//年代
		intensity: "", //设防情况
		createTime: parseTime(new Date()), //维护时间
		createUserName: userName.value, //维护人
		orgName: orgName.value, //维护人所属单位
	},
	// 表单验证规则
	rules: {
		intensity: [
			{ required: true, message: '请选择', trigger: 'change' }
		],
		year: [
			{
				required: true,
				message: "请输入正确数值",
				validator: isYearNotMust,
				trigger: ["change", "blur"],
			}
		],
		elasticityModulus: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		crossSectionalArea: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		earthquakeWavelength: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		earthquakewaveIncidentAngle: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		groundMotionSpeed: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		foundationZCoefficient: [
			{ required: true, message: "请输入", trigger: "blur" },
		],
		surfaceWaveVelocity: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		interfaceReductionCoefficient: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		singlePipeLength: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		depth: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		pipeOd: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		thickness: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		soilbulkDensity2: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		soilPressure: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		curvature: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		internalWaterPressure: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		poissonsRatio: [
			{ required: true, message: "请输入", trigger: "blur" },
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		combineAxialStrainCorrect: [
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		],
		allowableElongation: [
			{ required: false, message: "", trigger: "blur" },
		],
		jkDamageCorrect: [
			{
				message: "请输入正确数值，最多保留四位小数",
				validator: positivedecimals,
				options: { decimals: 4 },
				trigger: ["change", "blur"],
			},
		]
	},
	// 设防情况，候选值为：请选择、未设防、6度、7度、8度、9度、自设防、其他
	fortificationOptions: dictStore.fortificationOptions || [],
	// 年份
	yearsOptions: dictStore.yearsOptions1 || [],
	// 表格
	tableFormData: {
		tableData: [],
	},
});
const {
	params,
	rules,
	fortificationOptions,
	yearsOptions,
	tableFormData,
} = toRefs(data);

//表格
const multipleTableRef = ref();
const handleSelectionChange = (val) => {
	//   multipleSelection.value = val;
};
//表格新增行
const handleCalcAdd = () => {
	tableFormData.value.tableData.push({
		// table1
		elasticityModulus: '',
		crossSectionalArea: '',
		earthquakeWavelength: '',
		earthquakewaveIncidentAngle: '',
		groundMotionSpeed: '',
		foundationZCoefficient: '',
		surfaceWaveVelocity: '',
		lcos: '',
		lResult: '',
		er: '',
		et: '',
		interfaceReductionCoefficient: '',
		singlePipeLength: '',
		lt: '',

		// table2
		depth: '',
		pipeOd: '',
		thickness: '',
		// elasticityModulus: '',
		soilbulkDensity2: '',
		soilPressure: '',
		ps: '',
		curvature: "",
		es: '',
		// singlePipeLength: "",
		compressDeform: '',

		// table2
		internalWaterPressure: '',
		poissonsRatio: '',
		// elasticityModulus: '',
		// thickness: '',
		// curvature: '',
		// pipeOd: '',
		tensileStrain: '',
		strainDeform: '',
		//combineAxialStrain: '',

		// table2
		lt1: '',
		ls: '',
		lh: '',
		l3: '',
		allowableElongation: '',
		damage: '',
		combineAxialStrainCorrect: '',
		jkDamageCorrect: ''
	});
};
//删除行
const handleCalcdelete = (index) => {
	if (tableFormData.value.tableData.length) {
		index = tableFormData.value.tableData.length - 1;
		tableFormData.value.tableData.splice(index, 1);
	}
}

// 获取用户
function getUserInfo(userId) {
	getInfo(userId).then(response => {
		const { user } = response;
		if (user) {
			params.value.createUserName = user.userName;
			params.value.orgName = user.orgName;
		}
	});
};

// 导入弹框是否显示
let showUploadDialog = ref(false);
// 导入数据接口路径
const uploadUrl = ref(importInterfaceWeldingUrl);
// 导入成功回调
const onImport = (response, uploadFile, uploadFiles) => {
	const { code, data } = response;
	if (code == 200 && data) {
		proxy.$modal.msgSuccess('导入数据成功!');
		// 列表数据回显
		tableFormData.value.tableData = [...data];
	}
}

// 显示弹框
const openDialog = ref(false)
const handleVerify = () => {
	openDialog.value = true;
}
// 验证
const messageList = ref([]);
const dialogVisible = ref(false);
const cancle = () => {
	dialogVisible.value = false;
}
const recalculateVersion = (version) => {
	openDialog.value = false;
	recalculate({ versionId:version.id, type: '3' }).then(res => {
		if (JSON.stringify(res.data) == '{}') {
			ElMessageBox.confirm(
				'数据通过验证，是否计算？', '提示',
				{
					confirmButtonText: '计算并保存',
					cancelButtonText: '取消',
					type: 'success',
				}
			)
				.then(() => {
					somputationSave2({ versionId:version.id }).then(response => {
						if (response.code == 200) {
							router.push(`/lifelineVulnerAnalysis/lifelineMain?type=1`)
						}
					})
				}).catch(() => { })
		} else {
			const { data } = res;
			messageList.value = [];
			for (let i in data) {
				messageList.value.push({ label: `第${i}行计算参数未填写完整，请补充完整再计算。`, value: data[i] })
			}
			dialogVisible.value = true;
		}
	})
}
//计算
const handleBrickApply = () => {
	if (tableFormData.value.tableData && tableFormData.value.tableData.length) {
		proxy.$modal.loading('正在努力计算,请耐心等待！');
		let dataForm = tableFormData.value.tableData[0];
		let query = {
			id: dataForm.id,
			elasticityModulus: dataForm.elasticityModulus,
			crossSectionalArea: dataForm.crossSectionalArea,
			earthquakeWavelength: dataForm.earthquakeWavelength,
			earthquakewaveIncidentAngle: dataForm.earthquakewaveIncidentAngle,
			groundMotionSpeed: dataForm.groundMotionSpeed,
			foundationZCoefficient: dataForm.foundationZCoefficient,
			surfaceWaveVelocity: dataForm.surfaceWaveVelocity,
			interfaceReductionCoefficient: dataForm.interfaceReductionCoefficient,
			singlePipeLength: dataForm.singlePipeLength,
			depth: dataForm.depth,
			pipeOd: dataForm.pipeOd,
			wallThickness: dataForm.wallThickness,
			soilbulkDensity2: dataForm.soilbulkDensity2,
			soilPressure: dataForm.soilPressure,
			curvature: dataForm.curvature,
			internalWaterPressure: dataForm.internalWaterPressure,
			poissonsRatio: dataForm.poissonsRatio,
			combineAxialStrain: dataForm.combineAxialStrain,
			combineAxialStrainCorrect: dataForm.combineAxialStrainCorrect,
			allowableElongation: dataForm.allowableElongation,
			jkDamage: dataForm.jkDamage,
			jkDamageCorrect: dataForm.jkDamageCorrect,
			jkLCos: dataForm.jkLCos,
			result: dataForm.result,
			er: dataForm.er,
			et: dataForm.et,
			jkPs: dataForm.jkPs,
			lt: dataForm.lt,
			es: dataForm.es,
			compressDeform: dataForm.compressDeform,
			tensileStrain: dataForm.tensileStrain,
			thickness: dataForm.thickness,
			strainDeform: dataForm.strainDeform,
		}
		countInterfaceWelding(query).then((res) => {
			proxy.$modal.closeLoading();
			const { code, data } = res;
			if (code === 200 && data) {
				tableFormData.value.tableData = [{ ...tableFormData.value.tableData[0], ...data }];
				proxy.$modal.msgSuccess('计算完成！计算结果未保存，若需保存结果，请计算后点击提交按钮！');
			} else {
				proxy.$modal.msgError('计算失败！');
			}
		}).catch(err => {
			proxy.$modal.closeLoading();
			console.log(err.message);
		});
	}
}
//提交
const onSubmit = () => {
	proxy.$refs['queryRef'].validate((valid, fields) => {
		if (valid) {
			let dataForm = tableFormData.value.tableData[0];
			let query = {
				'type':'1',
				'upType':'3',
				network3Param: {
					id: dataForm.id,
					elasticityModulus: dataForm.elasticityModulus,
					crossSectionalArea: dataForm.crossSectionalArea,
					earthquakeWavelength: dataForm.earthquakeWavelength,
					earthquakewaveIncidentAngle: dataForm.earthquakewaveIncidentAngle,
					groundMotionSpeed: dataForm.groundMotionSpeed,
					foundationZCoefficient: dataForm.foundationZCoefficient,
					surfaceWaveVelocity: dataForm.surfaceWaveVelocity,
					interfaceReductionCoefficient: dataForm.interfaceReductionCoefficient,
					singlePipeLength: dataForm.singlePipeLength,
					depth: dataForm.depth,
					pipeOd: dataForm.pipeOd,
					wallThickness: dataForm.wallThickness,
					soilbulkDensity2: dataForm.soilbulkDensity2,
					soilPressure: dataForm.soilPressure,
					curvature: dataForm.curvature,
					internalWaterPressure: dataForm.internalWaterPressure,
					poissonsRatio: dataForm.poissonsRatio,
					combineAxialStrain: dataForm.combineAxialStrain,
					combineAxialStrainCorrect: dataForm.combineAxialStrainCorrect,
					allowableElongation: dataForm.allowableElongation,
					jkDamage: dataForm.jkDamage,
					jkDamageCorrect: dataForm.jkDamageCorrect,
					jkLCos: dataForm.jkLCos,
					result: dataForm.result,
					er: dataForm.er,
					et: dataForm.et,
					jkPs: dataForm.jkPs,
					lt: dataForm.lt,
					es: dataForm.es,
					compressDeform: dataForm.compressDeform,
					tensileStrain: dataForm.tensileStrain,
					thickness: dataForm.thickness,
					strainDeform: dataForm.strainDeform,
				}
			}
			proxy.$modal.loading('正在提交,请耐心等待！');
			saveInterfaceWelding(query).then((res) => {
				proxy.$modal.closeLoading();
				const { code, data } = res;
				if (code === 200) {
					proxy.$modal.msgSuccess("保存成功！");
					tableFormData.value.tableData = [{ ...tableFormData.value.tableData[0], ...data }];
					// 延迟跳转
					setTimeout(() => {
						router.push('/lifelineVulnerAnalysis/lifelineMain')
					}, 1500)
				}
			}).catch(err => {
				proxy.$modal.closeLoading();
				console.log(err.message);
			});
		} else {
			proxy.$refs['queryRef'].scrollToField(Object.keys(fields)[0])
		}
	})
}
// 获取数据
function getData(query) {
	getByIdAndType(query).then((res) => {
		const { code, data } = res;
		if (code === 200 && data) {
			const { upNetworkVo, tableEntity } = data;
			if (upNetworkVo) {
				// 基础信息
				params.value.code = tableEntity.code;
				params.value.intensity = upNetworkVo.intensity;
				params.value.year = upNetworkVo.year;
				// 维护时间
				const dateTime = new Date()
				params.value.createTime = parseTime(dateTime);
				// 根据id获取用户信息
				params.value.createUserName = userStore.name;
				params.value.orgName = userStore.orgName;
				// getUserInfo(tableEntity.createUser);
				//循环遍历之前加上非空判断
				tableFormData.value.tableData = [{ ...upNetworkVo, disabled: operateType.value === 'query' ? true : false }]
			}
		}
	}).catch(err => {
		console.log(err.message);
	});
}

//字典表查询
const optionList1 = ref([])
const optionList2 = ref([])
/** 获取字典值 */
async function getDictData() {
	await getValidDictItemsByDictCode("smxjsnd").then(response => {
		optionList1.value = response.data;//建造年代
	});
	await getValidDictItemsByDictCode("smxsfqk").then(response => {
		optionList2.value = response.data;//设防情况
	});
}
getDictData();

// 挂载
onMounted(() => {
	const id = route.query.id;
	if (id) {
		disabled.value = true;
		// 获取数据
		getData({ id, type: 1 });
	} else {
		disabled.value = false;
	}
});
</script>

<style lang="scss" scoped>
.table-wrapper {
	position: relative;

	h4 {
		font-size: 16px;
		font-weight: bold;
		color: #107ce5;
		text-align: center;
	}

	// 字体红色
	.color-red {
		color: red !important;
	}
}
</style>


